<template>
    <el-dialog
        :model-value="dialogVisible"
        :fullscreen="true"
        :align-center="true"
        @close="cancel"
        @open="open_dialog"
        class="app__dialog"
        :destroy-on-close="true"
    >
    <!-- <template #header="{ titleId, titleClass }">
            <div :id="titleId" :class="titleClass">
                {{ props.title }}
            </div>
    </template> -->

    <div class="page_all">
        
        <span @click="cancel"><svg-icon name="icon-chahao" :size="20"></svg-icon></span>
        
        <div class="page__body">
             <div class="page__left">
                <div class="left__title">
                    {{ data_obj.name }}
                </div>

                <div class="user__input__list">

                    <div class="input__list__scroll">
                        <div v-for="input, index in input_data.user_data" :key="index">
                            <div v-if="input.type == 'audio'">
                                <AudioCard
                                :name="input.name"
                                :index="index"
                                @change_field="field_change"
                                ></AudioCard>
                            </div>
                            
                            <div v-else-if="input.type == 'image'">
                                <ImageCard
                                :name="input.name"
                                :index="index"
                                @change_field="field_change"
                                ></ImageCard>
                            </div>

                            <div v-else-if="input.type == 'mask'">
                                <MaskCard
                                :name="input.name"
                                :index="index"
                                :input_data="input_data.user_data"
                                @change_field="field_change"
                                ></MaskCard>
                            </div>

                            <div v-else-if="input.type == 'text'">
                                <TextCard
                                :name="input.name"
                                :index="index"
                                @change_field="field_change"
                                ></TextCard>
                            </div>

                            <div v-else-if="input.type == 'string'">
                                <StringCard
                                :name="input.name"
                                :index="index"
                                @change_field="field_change"
                                ></StringCard>
                            </div>

                            <div v-else-if="input.type == 'video'">
                                <VideoCard
                                :name="input.name"
                                :index="index"
                                @change_field="field_change"
                                ></VideoCard>
                            </div>

                            <div v-else-if="input.type == 'switch'">
                                <SwitchCard
                                :name="input.name"
                                :index="index"
                                @change_field="field_change"
                                ></SwitchCard>
                            </div>

                        </div>

                        <div class="priority__item">
                            <div class="priority__name">
                                生成优先级
                            </div>

                            <div>
                                <el-select
                                    v-model="select_priority"
                                    placeholder="生成优先级"
                                    >
                                    <el-option
                                        v-for="item in priority_list"
                                        :key="item.value"
                                        :label="item.name"
                                        :value="item.value"
                                    />
                                </el-select>
                            </div>
                        </div>
                    </div>
                    

                    <div class="submit__row">
                        <div class="submit__btn"  @click="submit_generate">
                            <div class="submit__btn__text">开始生成 
                                <div class="submit__tips">  消耗
                               {{ data_obj.point }}
                            <svg-icon name="icon-suanli" :size="15" style="color: var(--wchime-color-coin);"></svg-icon>
                            </div>
                            </div>
                            
                        </div>
                    </div>

                </div>

            </div>
            <div class="page__right">
                <DialogRight
                :instance="data_obj"
                ref="right_record"
                ></DialogRight>
            </div>
        </div>
       

    </div>


    </el-dialog>
</template>
           
<script setup>
    import { ref, onMounted, nextTick, watch, watchEffect, reactive } from 'vue'
    import MessageBox from '@/utils/MessageBox'
    import ImageCard from './ImageCard.vue'
    import TextCard from './TextCard.vue'
    import StringCard from './StringCard.vue'
    import VideoCard from './VideoCard.vue'
    import AudioCard from './AudioCard.vue'
    import SwitchCard from './SwitchCard.vue'
    import MaskCard from './MaskCard.vue'

    import {uploadImage, startGenerate} from '@/api/homeApi.js'

    import DialogRight from './DialogRight.vue'
    

    const props = defineProps(['visible', "instance"])
    const emit = defineEmits(['cancel'])
    const dialogVisible = ref(props.visible)
    

    const data_obj = ref(props.instance)
    const input_data = ref({'user_data':[]})

    const  right_record = ref(null)

    const priority_list = ref([
        {'name': '空闲生成', 'value': 1},
        {'name': '正常生成', 'value': 5},
        {'name': '紧急生成', 'value': 10}
    ])
    const select_priority = ref(5)

    // --------------------------------------------------------------


    // 开始生成
    const submit_generate = async ()=>{
        console.log('开始生成')

        var req_data = {
            menu_id: data_obj.value.id,
            input_data: input_data.value,
            priority: select_priority.value
        }
        var res = await startGenerate(req_data)
        var res_data = res.data
        // console.log(res)

        MessageBox.success('任务提交成功！')

        right_record.value.insert_data(res_data)

    }

    // 字段改变
    const field_change = async (item, index)=>{

        if (['image', 'video', 'audio'].indexOf(input_data.value.user_data[index].type) != -1){
            if (item){
                // 上传文件
                var formdata = new FormData()
                formdata.append('file', item.raw)
                var res = await uploadImage(formdata)
                var res_data = res.data
                input_data.value.user_data[index]['fieldValue'] = res_data.path_url
            }else{
                input_data.value.user_data[index]['fieldValue'] = null
            }
            
        }
        else if (input_data.value.user_data[index].type == 'mask'){
            if (item){
                // 上传文件
                var formdata = new FormData()
                formdata.append('file', item)
                var res = await uploadImage(formdata)
                var res_data = res.data
                input_data.value.user_data[index]['fieldValue'] = res_data.path_url
            }else{
                input_data.value.user_data[index]['fieldValue'] = null
            }
            
        }else{
            input_data.value.user_data[index]['fieldValue'] = item
        }

    }

    watch(() => props.visible, (value) => {
        if (value){
            dialogVisible.value = true
        }else{
            emit('cancel')
            dialogVisible.value = false
        }
        // value && (dialogVisible.value = true)
    })
    watchEffect(() => {
        data_obj.value = props.instance
        try{
            if(data_obj.value.input){
                input_data.value = JSON.parse(data_obj.value.input)
            }else{
                input_data.value = {'user_data': []}
            }
            
        }catch{
            input_data.value = {'user_data': []}
        }
        
    })
    onMounted(()=>{
       
    })

    function cancel(){
        emit('cancel')
        dialogVisible.value = false
        right_record.value.remove_select_generate()
    }
    function open_dialog(){

        right_record.value.start_select_generate()
    }
    
</script>
<style scoped lang="scss">
    .priority__item{
        width: 100%;
        .priority__name{
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
            // border-bottom: 1px solid #fff;
            font-weight: 600;
        }
    }
    
    .page_all{
        width: 100%;
        display: flex;
        flex-direction: column;
        height: 100%;
        position: relative;
            
        span{

            position: absolute;
            right: 5px;
            top:5px;
        }
        span:hover{
            color: var(--wchime-color-hover-highlight);
            }
        

        .page__body{
            width: 100%;
            height: 100%;
            padding: 25px;
            display: flex;
            gap: 10px;
        }
    }
   .page__left{
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 100%;
    border: 1px solid var(--wchime-color-border);
    padding: 10px 0 10px 10px;
    .left__title{
        font-size: 25px;
        width: 100%;
        height: 40px;
        padding: 0 30px;
        white-space: nowrap;   // 防止文本换行
        overflow: hidden;      // 隐藏溢出的文本
        text-overflow: ellipsis; // 显示省略号
    }

    .user__input__list{
        position: relative;
        width: 100%;
        height: calc(100% - 40px);
        display: flex;
        flex-direction: column;
        
        .input__list__scroll{
            width: 100%;
            height: calc(100% - 60px);
            display: flex;
            flex-direction: column;
            padding-right: 10px;
            gap: 20px;
            overflow-y: auto;
            padding-bottom: 20px;
        }

        .submit__row{
            cursor: pointer;
            user-select: none;
            position: absolute;
            bottom: 0px;
            width: 100%;
            height: 50px;
            padding: 0 10px 0 0;
            .submit__btn{
                color: #fff;
                font-weight: 700;
                background-color: var(--wchime-color-highlight);
                border-radius: 25px;
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center; 
                align-items: center;

                .submit__tips{
                    font-weight: 500;
                    font-size: 10px;
                    padding-left: 10px;
                }
                .submit__btn__text{
                    display: flex;
                    flex-direction: row;
                    justify-content: center; 
                align-items: center;
                }
            }
            .submit__btn:hover{
                background-color: var(--wchime-color-hover-highlight);
            }
        }
    }
    
   }
   .page__right{
        width: calc(100% - 400px);
        min-width: 400px;
        height: 100%;
        border: 1px solid var(--wchime-color-border);
   }
</style>

<style>
.app__dialog{
    padding: 0;
}
.app__dialog .el-dialog__header{
        display: none;
    }

.app__dialog .el-dialog__body{
    height: 100%;
    width: 100%;
    /* min-width: 900px; */
}
</style>
